<template>
  <div class="get-app-info">
    <geekList
      :params="params"
      request-name="getBrokeNewsList"
      folder-name="explosive"
      @getData="getData">
      <div
        v-for="item in 5"
        :key="item.id"
        class="item"
        @click="router.push('works')">
        <div class="box">
          <div class="time">
            <i class="geek-icon">&#xe614;</i>
            距截稿 89天
          </div>
          <div class="title">OPPO 摄影大赛</div>
          <div class="name">
            <div class="left">公司名称</div>
            <div class="geek-icon">&#xe61f;</div>
          </div>
        </div>
      </div>
    </geekList>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const params = {};

const list = ref<any>([]);
const getData = (arr: any, currPage: number) => {
  if (currPage === 1) {
    list.value = arr;
  } else {
    list.value.push(...arr);
  }
};
</script>

<style lang="scss" scoped>
.get-app-info {
  min-height: 100vh;
  .item {
    width: 100%;
    height: 400px;
    border-radius: 20px;
    background: red;
    overflow: hidden;
    margin-top: 20px;
    .box {
      width: 100%;
      height: 400px;
      background: rgb(0, 0, 0, 0.3);
      margin-bottom: 20px;
      padding: 30px;
      color: #fff;
      position: relative;
      .time {
        font-size: 24px;
        display: flex;
        align-items: center;
        i {
          margin-right: 20px;
          font-size: 32px;
        }
      }
      .title {
        position: absolute;
        font-size: 40px;
        top: 260px;
      }
      .name {
        position: absolute;
        bottom: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 610px;
        .left {
          font-size: 24px;
        }
        .geek-icon {
          font-size: 26px;
        }
      }
    }
  }
}
</style>
